import React, { useState } from 'react';
import LogModule from './LogModule';
import ClipModule from './ClipModule';
import FileModule from './FileModule';

const TabPanel = () => {
  const [activeTab, setActiveTab] = useState('log');

  // 标签页定义
  const tabs = [
    { id: 'log', label: '日志', component: <LogModule /> },
    { id: 'clip', label: '剪切板', component: <ClipModule /> },
    { id: 'file', label: '文件管理', component: <FileModule /> }
  ];

  return (
    <div className="tab-panel" style={{ 
      backgroundColor: '#1a1a1a', 
      borderRadius: '6px',
      overflow: 'hidden',
      height: '100%',
      display: 'flex',
      flexDirection: 'column'
    }}>
      {/* 标签页头部 */}
      <div className="tab-header" style={{ 
        display: 'flex', 
        backgroundColor: '#252525',
        borderBottom: '1px solid #333'
      }}>
        {tabs.map(tab => (
          <div 
            key={tab.id}
            className={`tab ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
            style={{
              padding: '10px 20px',
              cursor: 'pointer',
              color: activeTab === tab.id ? '#fff' : '#aaa',
              backgroundColor: activeTab === tab.id ? '#333' : 'transparent',
              borderBottom: activeTab === tab.id ? '2px solid #00ddff' : 'none',
              transition: 'all 0.3s ease'
            }}
          >
            {tab.label}
          </div>
        ))}
      </div>
      
      {/* 标签页内容 */}
      <div className="tab-content" style={{ 
        padding: '15px',
        flex: '1',
        overflow: 'auto',
        backgroundColor: '#1a1a1a'
      }}>
        {tabs.find(tab => tab.id === activeTab)?.component}
      </div>
    </div>
  );
};

export default TabPanel; 